<template>
  <div class="project-detail">
    <!-- <el-page-header @back="goBack" content="项目详情"></el-page-header> -->
    <div class="header">
      <div class="left">项目详情</div>
      <div class="right">
        <el-button type="primary" @click="editVisible = true">修改</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="content">
      <el-form label-width="100px">
        <el-form-item label="项目名称">
          <span>{{ project.name }}</span>
        </el-form-item>
        <el-form-item label="相关人员">
          <span>{{ project.allNickNamesText }}</span>
        </el-form-item>
        <el-form-item label="项目地址">
          <span>{{ project.address }}</span>
        </el-form-item>
        <el-form-item label="项目类型">
          <span>{{ project.type == '0' ? '驻场运维' : '定期维保' }}</span>
        </el-form-item>
        <el-form-item label="项目描述">
          <span>{{ project.description }}</span>
        </el-form-item>
        <el-form-item label="企业名称">
          <span>{{ project.companyName }}</span>
        </el-form-item>
        <el-form-item label="物业名称">
          <span>{{ project.propertyName }}</span>
        </el-form-item>
        <el-form-item label="企业标识">
          <imageUpload v-model="project.companyLogo" single-file-mode :type="'page'" :limit="1" />
        </el-form-item>
        <el-form-item label="物业标识">
          <imageUpload v-model="project.propertyLogo" single-file-mode :type="'page'" :limit="1" />
        </el-form-item>
        <el-form-item label="项目图片">
          <imageUpload v-model="project.picPath" single-file-mode :type="'page'" :limit="1" />
        </el-form-item>
        <el-form-item label="经纬度">
          <span>{{ project.lat }}, {{ project.lon }}</span>
        </el-form-item>
      </el-form>
    </div>
    <ProjectFormDialog v-model:visible="editVisible" :initial-data="project" :projectType="'view'" @submit="handleFormSubmit" @call-parent-page="fetchProjectDetail" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getProjectInfo } from '@/api/workorder/projectInfo';
import ProjectFormDialog from '../../components/projectFormDialog.vue';
import { listUser } from '@/api/system/user';
import Cookies from 'js-cookie';

export default {
  components: {
    ProjectFormDialog,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const projectId = Cookies.get('projectId');
    const project = ref({});
    const editVisible = ref(false);
    const userList = ref([]);
    const pageSize = ref(10); // 每页条目数
    const currentPage = ref(1); // 当前页码

    const fetchProjectDetail = async () => {
      await getProjectInfo(projectId).then(data=> {
        // console.log(data, 'ssss')
        if(data.code=='200'&&data.data) {
          project.value = data.data
          project.value.allNickNamesText = project.value.projectUserList.map(item => item.nickName).join(',');
          project.value.userIdList = project.value.projectUserList.map(item => item.userId);
        }
      });
    };

    const handleFormSubmit = (formData) => {
      console.log('提交表单', formData);
      // 提交表单逻辑
      editVisible.value = false;
      fetchProjectDetail();
    };

    async function fetchItems() {
      let params = {
        pageNum: currentPage.value,
        pageSize: pageSize.value
      }
      try {
        listUser(params).then(data => {
          userList.value = data.rows;
        })
      } catch (error) {
        console.error(error);
      }
    };

    onMounted(() => {
      fetchProjectDetail();
      fetchItems();
    });

    return {
      project,
      // onEdit,
      editVisible,
      handleFormSubmit
    };
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 0 20px;
}

.left, .right {
  display: flex;
  align-items: center;
}
.left {
  font-weight: bold;
}
</style>
